<template>
    <!--我的群聊组件-->
    <div :class="{'search-open-contact':!$store.state.headerStatus}">
        <header id="wx-header">
            <div class="center">
                <router-link to="/contact" tag="div" class="iconfont icon-return-arrow">
                    <span></span>
                </router-link>
                <span>群聊</span>
            </div>
        </header>
        <!--这里的 search 组件的样式需要修改一下-->
        <search></search>
        <section class="weui-cells">
            <!-- ,name:groupInfo.getUserGroup.name,group_num:groupInfo.getUserGroup.member_number -->
            <template v-for="(groupInfo,index) in groupList">
                <router-link :to="{path:'/wechat/dialogue',query:{mid:groupInfo.getUserGroup.id}}" class="weui-cell weui-cell_access" :key="index" >
                    <div class="weui-cell__hd header-box">
                        <div class="header multi-header">
                            <img v-for="(user,index) in groupInfo.getUserGroup.user_list" :key="index" :src="user.getClientUid.headimg">
                        </div>
                    </div>
                    <div class="weui-cell__hd">
                        <p>
                            {{groupInfo.getUserGroup.name}} 
                             <!-- <span style="color:#999">(id:{{groupInfo.getUserGroup.id}})</span> -->
                            <span class="cgray">({{groupInfo.getUserGroup.member_number}}人)</span></p>
                    </div>
                </router-link>
            </template>
        </section>
         <div class="FrinedEnd"> {{groupList.length}}个群聊</div>
    </div>
</template>
<script>
    import search from "../common/search"
    export default {
        components: {
            search
        },
        data() {
            return {

            }
        },
        computed: {
            groupList() {
                return this.$store.getters.groupList || [];
            }
        }
    }
</script>
<style>
    .header-box {
        position: relative;
        float: left;
        width: 38px;
        height: 38px;
        margin-right: 10px;
    }

    .header-box .header {
        height: 100%;
        display: flex;
        display: -webkit-flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
        overflow: hidden;
        background: #dddbdb;
    }

    .header-box .header img {
        width: 10%;
        height: auto;
        flex-grow: 2;
        border: 0;
    }

    .multi-header img {
        margin: 1px;
    }
    .FrinedEnd{
          margin: 20px 0px;
  text-align: center;
    }
    .cgray{
        color: gray;
    }
</style>